<template>
  <div class="container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 表单 -->
        <el-form :model="form">
          <el-form-item label="关键字" prop="keyword">
            <el-input
              style="width: 200px; margin-right: 10px"
              v-model="form.keyword"
              class="filter-item"
              placeholder="根据编号搜索"
            ></el-input>
            <el-button
              class="filter-item fr"
              size="small"
              type="primary"
              style="margin-left: 10px"
              @click="search"
              >搜索</el-button
            >
            <el-button class="filter-item fr" size="small" @click="clear"
              >清除</el-button
            >
          </el-form-item>
        </el-form>
        <!-- 弹框 -->
        <el-alert
          type="info"
          class="alert"
          show-icon
          :closable="false"
          :title="`数据一共${total}条`"
        ></el-alert>
        <!-- 表格 -->
        <el-table :data="questions" header-cell-class-name="table_header">
          <el-table-column label="编号" prop="id"></el-table-column>
          <el-table-column label="题型" prop="questionType" >
            <template #default="{ row }">
              {{ showType(row.questionType) }}
            </template>
          </el-table-column>
          <el-table-column label="题目编号" prop="questionIDs" width="250px">
            <template #default="{ row }">
              <div style="color:#66b1ff; cursor:pointer" v-for=" (item , index) in row.questionIDs" :key="index" @click="showDialog(item.id)">{{item.number}}</div>
            </template>
          </el-table-column>
          <el-table-column label="录入时间" prop="addTime"></el-table-column>
          <el-table-column
            label="答题时间"
            prop="totalSeconds"
          ></el-table-column>
          <el-table-column
            label="正确时间"
            prop="accuracyRate"
          ></el-table-column>
          <el-table-column
            label="录入人"
            prop="userName"
          ></el-table-column>
          <el-table-column label="操作">
            <template #default="{ row }">
              <el-button
                type="danger"
                plain
                icon="el-icon-delete"
                circle
                @click="delQuestions(row.id)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          class="pager"
          background
          :total="total"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pagesize"
          :current-page="page"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="total,sizes, prev, pager, next, jumper"
        >
        </el-pagination>
      </el-card>
      <tc-dialog
      :dialogVisible.sync="dialogVisible"
      :SonList="SonList"
    ></tc-dialog>
    </div>
  </div>
</template>

<script>
import { randoms, removeRandoms, detail } from '@/api/hmmm/questions'
import TcDialog from './cmp/tc-dialog.vue'
export default {
  components: { TcDialog },
  data () {
    return {
      SonList: {},
      dialogVisible: false,
      questions: [],
      form: {
        keyword: ''
      },
      page: 1,
      pagesize: 20,
      total: 0
    }
  },
  created () {
    this.getQuestions()
  },
  methods: {
    async showDialog (id) {
      // console.log(id)
      this.dialogVisible = true
      const { data } = await detail({ id })
      this.SonList = data
    },
    delQuestions (id) {
      this.$confirm('此操作将永久删除该题组, 是否继续?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await removeRandoms({ id })
          this.$message.success('删除学科成功')
          if (this.questions.length === 1 && this.page > 1) {
            this.page--
          }
          this.getQuestions()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    async search () {
      const { data } = await randoms({ page: 1, keyword: this.form.keyword })
      // console.log(data)
      this.total = data.counts
      this.questions = data.items
    },
    clear () {
      this.form = {
        keyword: ''
      }
      this.page = 1
      this.pagesize = 20
      this.getQuestions()
    },
    showType (type) {
      if (type === '1') {
        return '单选'
      } else if (type === '2') {
        return '多选'
      } else {
        return '简答'
      }
    },
    async getQuestions () {
      // this.loading = true
      const { data } = await randoms({
        page: this.page,
        pagesize: this.pagesize
      })
      // console.log(data)
      this.questions = data.items
      this.total = data.counts
      // this.loading = false
    },
    handleSizeChange (val) {
      this.pagesize = val
      this.page = 1
      this.getQuestions()
    },
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.page = val
      this.getQuestions()
    }
  }
}
</script>

<style scoped lang='scss'>
.pager {
  margin-top: 15px;
  float: right;
}
.el-table .cell {
  white-space: pre-line !important;
}
</style>
